<template>
	<view>
		<view class="list">
			<view class="title">违章信息详情 <view :class="'state '+ (Info.State==0?'red':'blue')">{{Info.StateText }}</view></view>
			<view class="line"><view class="name">违章编号：</view><view class="value">{{Info.Num }}</view></view>
			<view class="line"><view class="name">违章车辆：</view><view class="value">{{Info.CarNum }}</view></view>
			<view class="line"><view class="name">罚款金额：</view><view class="value red">200.00</view></view>
			<view class="line"><view class="name">违章时间：</view><view class="value">{{Info.CreateDate.ToTime() }}</view></view>
			<view class="line"><view class="name">违章地点：</view><view class="value">{{Info.Address }}</view></view>
			<view class="line">
				<view class="name">现场照片：</view>
				<view class="value">
					<view class="img" v-for="(item,index) in ImgList"><image :src="item" mode="aspectFill" @click="PrevImg(ImgList, index)"/></view>
				</view>
			</view>
		</view>
		<view class="gopay" @click="GoPay()" v-if="Info.State==0">立即缴费</view>
		<view class="handle" @click="GoWeiXin()">进入公众号</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Info:{},
				ImgList:[]
			};
		},
		onLoad(options) {
			this.ID=options.ID;
			this.Find_ParkInfo();
		},
		methods:{
			Find_ParkInfo(){
				var data = {};
				data.ID=this.ID;
				data.Act="Find_ParkInfo";
				this.Util.Loading("加载中...");
				this.Util.Member(data, json=>{
					this.Util.HideLoading();
					this.Info = json.Data.Info;
					this.ImgList=json.Data.Info.Imgs.split(',');
				});
			},
			PrevImg(ImgList, Index){
				uni.previewImage({
				  current: ImgList[Index], // 当前显示图片的http链接
				  urls: ImgList // 需要预览的图片http链接列表
				});
			},
			GoPay(){
				window.location.href="http://xipingzhifa.qiyedaishu.com/GoPay.aspx?ID="+this.ID;
			},
			GoWeiXin(){
				uni.navigateTo({
					url:'home'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	page{background-color:#ededed; padding:10px; margin:0px;}
	.loading{width:100%; padding-top:30px; text-align:center;}
	.stastics{width:100%; height:auto; border-radius:8px; background-color:#ffffff; display:flex; flex-direction:row; margin-bottom:10px;}
	.stastics .tab{width:33.33%; height:60px;}
	.stastics .tab .count{width:100%; height:30px; padding-top:10px; font-size:16px; text-align:center;}
	.stastics .tab .name{width:100%; height:30px; line-height:30px; font-size:13px; text-align:center; color:gray;}
	.list{width:100%; height:auto; border-radius:8px; background-color:#ffffff; font-size:30rpx; padding:10px; padding-bottom:0px; margin-bottom:10px;}
	.list:active{background-color:#f6f5f5;}
	.list .title{font-size:18px; height:40px;}
	.list .state{font-size:30rpx; height:40px; float:right;}
	.list .line{width:100%; height:auto; min-height:20px; padding-bottom:10px;  display:flex; flex-direction:row;}
	.list .line .name{width:auto; color:#808080;}
	.list .line .value{flex:1;  text-align:left; padding-left:10px;}
	.list .line .value .img{ width:150rpx; height:150rpx; margin-left:10px; margin-bottom:10px; float:left;}
	.list .line .value .img:nth-child(3n+1){margin-left:0px;}
	.list .line .value .img image{width:100%; height:100%;}
	.gopay{width:100%; height:90rpx; line-height: 90rpx; margin-top:40rpx; font-size:32rpx; background-color: #23a002; color: #ffffff; text-align: center; border-radius: 10rpx;}
	.handle{width:100%; height:90rpx; line-height: 90rpx; margin-top:40rpx; font-size:32rpx; background-color: #0181fe; color: #ffffff; text-align: center; border-radius: 10rpx;}
</style>
